<template>
	<div class="clearfix">
		<h5>后台录入页</h5>
		<el-form ref="movieform" :model="form" status-icon :rules="rules" class='demo-ruleForm' label-width="80px" label-position='left'>
			<el-form-item label="电影名字" prop='title'>
				<el-input v-model="form.title" auto-complete='off'></el-input>
			</el-form-item>
			<el-form-item label="导演名字" prop='doctor'>
				<el-input v-model="form.doctor"></el-input>
			</el-form-item>
			<el-form-item label="所属国家" prop='country'>
				<el-input v-model="form.country"></el-input>
			</el-form-item>
			<el-form-item label="语言" prop='language'>
				<el-input v-model="form.language"></el-input>
			</el-form-item>
			<el-form-item label="上映年份" prop='year'>
				<el-input v-model.number="form.year" type='number'></el-input>
			</el-form-item>
			<el-form-item label="电影海报" prop='poster'>
				<el-input v-model="form.poster"></el-input>
			</el-form-item>
			<el-form-item label="播放地址" prop='flash'>
				<el-input v-model="form.flash"></el-input>
			</el-form-item>
			<el-form-item label="电影简介" prop='summary'>
				<el-input v-model="form.summary" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="onSubmit('movieform')" type="primary">提交</el-button>
				<el-button @click="resetForm('movieform')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	const request = require('@/api/movies.js')
	export default {
		name: 'addmovies',
		data() {
			const checkAge = (rule, value, callback) => {
				if(!value) {
					return callback(new Error('不能为空'));
				}else{
					callback();
				}
			}
			return {
				form: {
					title: '',
					doctor: '',
					country: '',
					language: '',
					year: new Date().getFullYear(),
					poster: '',
					flash: '',
					summary: '',
				},
				rules: {
					title: [{
						required: true,
						validator: checkAge,
						trigger: 'blur'
					}],
					doctor: [{
						required: true,
						validator: checkAge,
						trigger: 'blur'
					}],
					country: [{
						required: true,
						validator: checkAge,
						trigger: 'blur'
					}],
					language: [{
						required: true,
						validator: checkAge,
						trigger: 'blur'
					}],
					year: [{
						required: true,
						validator: checkAge,
						trigger: 'blur'
					}],
					poster: [{
						required: true,
						validator: checkAge,
						trigger: 'blur'
					}],
					flash: [{
						required: true,
						validator: checkAge,
						trigger: 'blur'
					}],
					summary: [{
						required: true,
						validator: checkAge,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			onSubmit(formName) {
				console.log(111)
				this.$refs[formName].validate(valid => {
					console.log(valid)
					if(valid) {
						this.$confirm('请确认提交数据正确, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							const data = this.form
							request.addmovies(data).then(res=>{
								this.$message.success('添加成功')
								this.resetForm(formName) //重置
							}).catch(err=>{
								console.log(err)
							})
						}).catch(err => {
							this.$message({
								type: 'info',
								message: '已取消'
							});
						})
					} else {
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			addmovies(data){
				
			}
		}
	}
</script>

<style>

</style>